<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .wrap {
            padding: 10px;
        }

        .button-group button {
            padding: 2px 10px;
        }

        .button-group button+button {
            margin-left: 20px;
        }

        .slide {
            width: 1100px;
            height: 100px;
            border: 1px solid #333;
            border-top: 0;
            margin-top: 20px;
            position: relative;
        }

        .slide .ball {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: pink;
            position: absolute;
            left: 0px;
        }
    </style>
</head>

<body>
    <!-- .wrap>(.button-group>button.start*3{开始})+.slide>.ball -->
    <div class="wrap">
        <div class="button-group">
            <button class="start">开始</button>
            <button class="pause">暂停</button>
            <button class="back">返回</button>
        </div>
        <div class="slide">
            <div class="ball"></div>
        </div>
    </div>
</body>
<script>
    // JS运动的本质
    // 通过计时器,每隔固定时间改变元素的 位置(left top) 宽高等 

    var start = document.querySelector(".start");
    var pause = document.querySelector(".pause");
    var back = document.querySelector(".back");
    var ball = document.querySelector(".ball");

    var timer = null; //全局变量 => 记录计时器的编号

    // 正向运动
    // 从当前位置(0) - 1000 
    start.onclick = function () {
        // cur => 1. 记录ball的初始位置  2. 记录每次运动之后的新位置
        var cur = ball.offsetLeft; // 1000
        var end = 1000;
        var speed = 11;

        clearInterval(timer);
        timer = setInterval(function () {
            // 在原本位置的基础上 -> 更新位置 -> 向右 + speed
            cur += speed;
            ball.style.left = cur + "px";
            console.log(cur);

            // 每次运动完毕之后判断 => 是否到达终点
            // 理想情况下  cur == end  => 运动的距离 % speed = 0
            // 解决方法: 设置误差允许范围(speed) -> 再跑肯定超 ->直接到达终点
            // cur >= end - speed && cur <= end + speed 
            // Math.abs(cur-end) <= Math.abs(speed);

            if (Math.abs(cur - end) <= Math.abs(speed)) {
                clearInterval(timer);
                ball.style.left = end + "px";
            }

        }, 10);

    }

    pause.onclick = function () {
        clearInterval(timer);
    }

    // 反向运动
    // 从当前位置 -> 0 
    back.onclick = function () {
        // cur => 1. 记录ball的初始位置  2. 记录每次运动之后的新位置
        var cur = ball.offsetLeft;
        var end = 0;
        var speed = -11;

        clearInterval(timer);
        timer = setInterval(function () {
            // 在原本位置的基础上 -> 更新位置 -> 向右 + speed
            cur += speed;
            ball.style.left = cur + "px";
            console.log(cur);

            // 每次运动完毕之后判断 => 是否到达终点
            // 理想情况下  cur == end  => 运动的距离 % speed = 0
            // 解决方法: 设置误差允许范围(speed) -> 再跑肯定超 ->直接到达终点
            // cur >= end - speed && cur <= end + speed 
            // Math.abs(cur-end) <= Math.abs(speed);

            if (Math.abs(cur - end) <= Math.abs(speed)) {
                clearInterval(timer);
                ball.style.left = end + "px";
            }

        }, 10);

    }



</script>

</html>